import { getCode } from "@/api/user";
import { Checkbox, Form, Input, Button } from "antd-mobile";
import { useMemo, useState } from "react";

const Login = () => {
  const [formIns] = Form.useForm();
  // 验证码是否禁用
  const [disabled, setDisabled] = useState(true);

  const handleFinish = (values: any) => {
    console.log("vaues", values);
  };

  const handleValuesChange = (changedValues: any, allValues: any) => {
    const { tel } = allValues;
    if (/^1\d{10}$/.test(tel)) {
      setDisabled(false);
    } else {
      setDisabled(true);
    }
  };

  // 发送验证码
  const sendMsg = async () => {
    // 获取手机号
    const tel = formIns.getFieldValue("tel");
    // 调用接口
    const resp = await getCode(tel);
  };

  return (
    <div>
      <Form
        form={formIns}
        onValuesChange={handleValuesChange}
        onFinish={handleFinish}
        footer={
          <Button block type="submit" color="primary" size="large">
            提交
          </Button>
        }
      >
        <Form.Item name="tel">
          <Input placeholder="请输入手机号码" />
        </Form.Item>

        <Form.Item
          name="code"
          extra={
            <Button color="success" disabled={disabled} onClick={sendMsg}>
              发送验证码
            </Button>
          }
        >
          <Input placeholder="请输入短信验证码" />
        </Form.Item>

        <Form.Item name="validDays">
          <Checkbox>15天免登录</Checkbox>
        </Form.Item>
      </Form>
    </div>
  );
};

export default Login;
